<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery拖拽和缩放图片功能</title>
		<style type="text/css">
			body{background-color: #313131}
			* {
				margin: 0;
				padding: 0;
				border: 0;
			}
			.drag {
				position: relative;
				width: 800px;
				height: 500px;
				margin: auto;
				margin-top: 50px;
				border: 1px solid #4a4a4a;
				border-radius: 2px;
				overflow: hidden;
				background-color: #2d2d2d;
			}
			.drag-action {
				position: absolute;
				right: 10px;
				top: 10px;
				padding: 5px 0;
				width: 50px;
				background-color: rgba(0,0,0,0.5);
				border-radius: 2px;
				text-align: center;
				z-index: 2;
			}
			.scale-big,
			.scale-small {
				width: 14px;
				height: 14px;
				vertical-align: middle;
				cursor: pointer;
			}
			.direction {
				width: 40px;
				margin-top: 5px;
				vertical-align: middle;
			}
			.arrow {
				position: absolute;
				border: 1px solid transparent;
				width: 10px;
				height: 10px;
				cursor: pointer;
			}
			.up {
				top: 33px;
				left: 19px;
			}
			.down {
				bottom: 7px;
				left: 19px;
			}
			.left {
				top: 45px;
				left: 7px;
			}
			.right {
				top: 45px;
				right: 7px;
			}
			.drag-box {
				position: relative;
			}
			.drag-img {
				position: absolute;
				width: 600px;
				cursor: move;
			}
		</style>
	</head>
	<body>
		<div class="drag">
			<div class="drag-action">
				<img src="./images/scale-big.png" alt="+" class="scale-big">
				<img src="./images/scale-small.png" alt="-" class="scale-small"><br />
				<img src="./images/drag.png" alt="方向" class="direction">
				<div class="arrow up" data-arrow="moveUp"></div>
				<div class="arrow right" data-arrow="moveRight"></div>
				<div class="arrow down" data-arrow="moveDown"></div>
				<div class="arrow left" data-arrow="moveLeft"></div>
			</div>
			<div class="drag-box">
				<img src="./images/jq22.png" alt="拖拽图" class="drag-img">
			</div>
		</div>
		<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
		<script src="./js/drag-move.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var drag = $(".drag-img")
			var dragImg = new DragScale(drag, drag)
			// 拖动
			dragImg.drag()
			// 滚轮
			$(".drag-box").on("mousewheel", function() {
				dragImg.scale(0)
			})
			// 放大
			$(".scale-big").click(function() {
				console.log('点击放大')
				drag.scale(1.1)
			})
			// 缩小
			$(".scale-small").click(function() {
				drag.scale(2)
			})
			// 上下左右点击
			$(".arrow").click(function() {
				dragImg[$(this).data("arrow")]()
			})
		</script>
	</body>
</html>
